<template>
  <form class="addshipp" >
    <!-- @submit.prevent="submit" -->
    <input type="text" placeholder="收货人" v-model="name"/>
    <input type="text" placeholder="手机号码" v-model="phone" />
    <view class="tui-picker-content">
      <picker @change="changeRegin" mode="region" value="region">
        <view
          class="tui-picker-name"
          v-if="region[0] == undefined"
          style="color:rgb(121, 120, 120)"
        >所在地区</view>
        <view
          class="tui-picker-detail"
          v-if="region[0] !== undefined"
        >{{region[0]}} - {{region[1]}} - {{region[2]}}</view>
      </picker>
    </view>

    <textarea v-model="detailed" placeholder="详细地址:如道路,门牌号,小区,楼栋号"></textarea>
    <!-- <view class="tacitly">
      <text>设为默认地址</text>
      <switch :checked="address_id" @change="swit" bindchange="switch2Change" />
    </view> -->
    <navigator url="/pages/shipping/shipping" redirect>
    <view class="delete">
        删除收货地址
    </view>
    </navigator>
    <view class="caution"  v-if="caut">请填写完整信息</view>
    <navigator :url="phone&&procince&&city&&area&&name&&detailed?'/pages/shipping/shipping': ''" redirect>
    <view class="btn" @click="amend">保存</view>
    </navigator>
  </form>
</template>

<script>
export default {
  data() {
    return {
       region: [],
      phone:"",
      procince:"",
      city:"",
      area:"",
      name:"",
      detailed:"",
      address_id: 0,
      caut:false,
    };
  },
  methods: {
    
    // switch2Change(e) {
    //   console.log("switch2 发生 change 事件，携带值为", e.detail.value);
    // },
    // 选择省市区函数
    changeRegin(e){
      console.log(this.region)
      console.log(e.detail.value)
      this.region = e.detail.value;
      for(let i=0; i<this.region.length; i++){
        this.procince = this.region[0],
        this.city = this.region[1],
        this.area = this.region[2]
      }
    },

    // 修改
    amend(){
      // 非空判断
      if(this.phone == '' || this.procince == '' || this.city == '' || this.area == '' || this.name == ''|| this.detailed == ''){
      setTimeout(()=>{this.caut = false}
      ,2000)
      this.caut = true 
    }
    // 数据请求
       if (uni.getStorageSync("token")) {
      let data = {
        phone: this.phone,
        procince: this.procince,
        city: this.city,
        area: this.area,
        name: this.name,
        detailed: this.detailed,
        address_id: this.address_id,
      };
      data.token = uni.getStorageSync("token")
      wx.request({
        url: "http://api_dev.wanxikeji.cn/api/userAddressAddModify",
        // data: {},
        method: "POST", 
        data: data,
        // header: {},
        success: function () {
          // success
        },
        fail: function () {
          // fail
        },
        complete: function () {
          // complete
        },
      });
    }
    }
  },
};
</script>

<style lang="scss" scoped>
.addshipp{
    font-size: 25rpx;
}
.addshipp input{
    border-bottom: 1px rgb(218, 217, 217) solid;
    padding: 0 15px;
    height: 45px;
}
.addshipp textarea{
    height: 60px;
    padding: 15px;
    border-bottom: 1px rgb(218, 217, 217) solid;
    width: 100%;
}
.tacitly{
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px rgb(218, 217, 217) solid;
}
.tacitly switch{
    zoom: 0.8;
}
.addshipp .btn{
    position: absolute;
    bottom: 2%;
    left: 35%;
    background: #f60;
    color: white;
    font-size: 13px;
    padding: 10px 50px;
    border-radius: 15px;
    cursor: pointer;
}
.addshipp .btn:active{
    background: rgb(214, 107, 35);
}
.delete{
    padding: 15px;
    text-align: center;
    border-bottom: 1px rgb(218, 217, 217) solid;
}
.delete:active{
    background:  rgb(243, 242, 242);
}
.tui-picker-content{
  padding: 15px;
  border-bottom: 1px rgb(218, 217, 217) solid;
}

.caution{
  position: absolute;
  border: 2px rgb(247, 112, 112) solid;
  background: rgba(247, 112, 112,.5);
  display: inline-block;
  padding: 10px 60px;
  border-radius: 5px;
  left:23%;
  top: 30%;
  z-index: 50; 
  // display: none; 
}

</style>